<template>
    <van-sticky :offset-top="170">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                        v-model="form.userPhone"
                        name="userPhone"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                />
                <van-field
                        v-if="!loginMethod"
                        v-model="form.userPassword"
                        type="password"
                        name="userPassword"
                        label="密码"
                        placeholder="密码"
                />
                <van-row v-if="loginMethod">
                    <van-col span="16">
                        <van-field
                                v-model="form.verifyCode"
                                name="verifyCode"
                                label="验证码"
                                placeholder="验证码"
                        />
                    </van-col>
                    <van-col span="8">
                        <van-field
                                v-model="timerContent"
                                input-align="center"
                                disabled
                        />
                    </van-col>
                </van-row>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button v-if="showLoginBtn || !loginMethod" round block type="primary" native-type="submit">
                    登录
                </van-button>
                <van-button v-else round block type="primary" native-type="submit">
                    获取验证码
                </van-button>
                <van-button @click="changeLoginMethod" round block hairline type="primary" size="normal" plain>
                    {{ loginMethodText }}
                </van-button>
            </div>
        </van-form>
    </van-sticky>
</template>

<script>
import {getVerifyCode, passwordLogin, verifyCodeLogin} from '@/api/user'
import {Toast} from "vant";
import {router} from "@/router";
import VConsole from "vconsole"

let vc = new VConsole()
export default {
    name: "login",
    data() {
        return {
            form: {
                userPhone: '',
                userPassword: '',
                verifyCode: '',
            },
            code: '',
            headImg: '',
            timer: '120',
            timerContent: '',
            showLoginBtn: false,
            loginMethod: true,
            loginMethodText: '密码登录'
        }
    },
    methods: {
        onSubmit() {
            if (this.showLoginBtn || !this.loginMethod) {
                this.login()
            } else {
                this.getVerifyCode()
            }
        },
        getVerifyCode() {
            getVerifyCode({'phone': this.form.userPhone}).then(response => {
                if (response.code === 200) {
                    this.code = response.data;
                    Toast.success('获取成功');
                    this.timerContent = this.timer + "s";
                    let timer = setInterval(() => {
                        if (this.timer > 1) {
                            let temp = Number(this.timer)
                            this.timer = --temp;
                            this.timerContent = this.timer + "s";
                            // this.timer--;
                        } else {
                            this.showLoginBtn = false
                            this.timerContent = ''
                            clearInterval(timer)
                        }
                    }, 1000)
                    this.showLoginBtn = true
                } else {
                    Toast.fail(response.message);
                }
            })
        },
        login() {
            Toast.loading({
                message: '登录中...',
                forbidClick: true,
            });
            if (this.loginMethod) {
                verifyCodeLogin(this.form).then(response => {
                    if (response.code === 200) {
                        Toast.success('登录成功');
                        sessionStorage.setItem("user", JSON.stringify(response.data))
                        if (localStorage.getItem('headImg') == null) {
                            localStorage.setItem('headImg', response.data.userHeadImg)
                        }
                        router.replace({path: '/home'})
                    } else {
                        Toast.fail(response.message);
                    }
                })
            } else {
                passwordLogin(this.form).then(response => {
                    if (response.code === 200) {
                        Toast.success('登录成功');
                        sessionStorage.setItem("user", JSON.stringify(response.data))
                        if (localStorage.getItem('headImg') == null) {
                            localStorage.setItem('headImg', response.data.userHeadImg)
                        }
                        router.replace({path: '/home'})
                    } else {
                        Toast.fail(response.message);
                    }
                })
            }
        },
        changeLoginMethod() {
            if (this.loginMethod) {
                this.loginMethodText = '短信验证码登录'
                this.form.verifyCode = ''
            } else {
                this.loginMethodText = '密码登录'
                this.form.userPassword = ''
            }
            this.loginMethod = !this.loginMethod
            this.showLoginBtn = !this.showLoginBtn
        }
    },
    created() {
        let headImg = localStorage.getItem('headImg')
        if (headImg != null) {
            this.headImg = headImg;
        }
    }
};
</script>

<style scoped>
.van-button {
    --van-button-primary-border-color: rgb(255, 255, 255)
}
</style>